<template>
	<view>
		<u-navbar>
			<view style="display: flex;justify-content: center;align-items: center; padding-left: 30rpx;">
				<!-- <view class="u-p-20" @click="location">
					{{ vuex_city == '' ? '选择' : vuex_city }}
					<u-icon name="arrow-down-fill" class="u-p-l-10" color="#515356"></u-icon>
				</view> -->
				<!-- #ifdef MP-WEIXIN -->
				<view class="navtitle">
					预约消息
				</view>
				<!-- #endif -->
				<!-- #ifndef MP-WEIXIN -->
				<!-- <u-search placeholder="你想住在哪儿" v-model="keyword" input-align="center" :show-action="false"
					:clearabled="true" :disabled="true" style="width: 580rpx;" @click="search"></u-search> -->
				<!-- #endif -->
			</view>
		</u-navbar>
		<view>
			<view class="title">
				选择地址
			</view>
			<view class="pick_space flex">
				<view class="iteml">
					{{ item.space }}
				</view>
				<view class="itemr">
					<u-icon name="edit-pen-fill"></u-icon>
				</view>
			</view>
			<view class="title">
				选择预约时间
			</view>
			<view class="time flex">
				<view v-for="(item, i) in timelist">
					<view v-if="!((i + 1) % 4)" class="time_item">
						{{ item }}
					</view>
					<view v-else class="time_item right">
						{{ item }}
					</view>
				</view>
				<!-- <view class="time_item bg-per">s</view>
				<view class="time_item">s</view>
				<view class="time_item">s</view>
				<view class="time_item right">s</view> -->
			</view>
		</view>
		<view class="foot">
			<view class="bottom">
				<view class="pbtn" @click="goBuy()">下一步</view>
			</view>
		</view>
	</view>
</template>

<script>
//import mySignCalendar from '@/components/my-sign-calendar/my-sign-calendar.vue'
export default {
	component: {
		//mySignCalendar
	},
	data() {
		return {
			item: {
				space: '徐汇区利徐汇区徐汇区徐汇区',
				timelist: [],
			},
		}
	},
	async onShow() {
		await this.createTimeList()
	},
	methods: {
		createTimeList() {
			let timelist = []
			for (let i = 9; i <= 17; i++) {
				for (let j = 0; j <= 30; j = j + 30) {
					if (j === 0) {
						var temp = i.toString() + ':' + '0' + j.toString()
						timelist.push(temp)
					}
					else {
						var temp = i.toString() + ':' + j.toString()
						timelist.push(temp)
					}
				}
			}
			this.timelist = timelist
			console.log('ss', this.timelist)
		},
		goBuy(){
			this.$u.route({
				url: 'pages/housekeeperOrder/sureOrder'
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.flex {
	display: flex;
}

.title {
	font-size: 25rpx;
	color: rgb(158, 158, 158);
	padding: 40rpx;
}

.time {
	padding: 40rpx;

	.time_item {
		width: 170rpx;
		height: 90rpx;
		border-radius: 20rpx;
		background-color: white;
		margin-right: 15rpx;
		text-align: center;
		line-height: 90rpx;
	}

	.right {
		margin-right: 0rpx;
	}

	.bg-per {
		background-color: #6c76f4;
	}
}

.navtitle {
	font-size: 40rpx;
}

.pick_space {
	margin: 0rpx 40rpx 0 40rpx;
	border-radius: 40rpx;
	line-height: 180rpx;
	padding: 0 40rpx;
	height: 180rpx;
	background-color: white;
	font-size: 40rpx;

	.iteml {
		text-align: left;
	}
}

.foot {
	height: 150rpx;
	display: flex;
	flex-direction: column;
	background-color: white;
	padding-top: 20rpx;
	position: fixed;
	bottom: 0;
	width: 100%;
}

.bottom {
	display: flex;
	margin-top: 20rpx;
	padding: 0 20rpx;
	justify-content: flex-end;
	align-items: center;

	.pbtn {
		height: 70rpx;
		line-height: 65rpx;
		width: 100%;
		padding-top: 0rpx;
		display: inline-block;
		white-space: nowrap;
		border-radius: 26rpx;
		font-size: 26rpx;
		text-align: center;
		color: white;
		background-color: #6c76f4;
		border: 2rpx solid #6c76f4;
	}
}
</style>
